<template >
    <div style="padding: 10px;background: #f2f2f2">

        <div>
            <!--            <van-panel title="订单已完成 >" style="font-size: 100px">-->

            <!--            </van-panel>-->
            <el-row style="margin-top: 0">
                <el-col :span="24" style="background: #FFFFFF;margin-top: 10px" >

                    <div v-for="item in totallist">
                        <el-header v-if="item.status==1" style="padding: 20px">已付款，等待配送 ></el-header>
                        <el-header v-else-if="item.status==2" style="padding: 20px">正在配送 ></el-header>
                        <el-header v-else-if="item.status==3" style="padding: 20px">已完成 ></el-header>
                    </div>
                </el-col>
            </el-row>

        </div>



        <el-row style="margin-top: 5px">
            <el-col :span="24" style="background: #FFFFFF;margin-top: 5px">
                <div style="background: #FFFFFF;padding: 20px">
                    <div class="grid-content bg-purple-dark" style="background: #FFFFFF;padding: 20px;">
                        <span>感谢您对我们的信任,期待再次光临</span>
                        <div><font style="font-size: 10px">温馨提示:请厉行节约，拒绝浪费</font></div>
                    </div>
                    <div style="text-align: center;color: rgba(255, 130, 0, 0.89)">
                        <div class="orderfirst" style="text-align: center"><div><van-icon name="bill-o" /></div>打赏骑手</div>
                        <div class="orderfirst" @click="goMenuList"><div><van-icon name="add" /></div>再来一单</div>
                        <div class="orderfirst" ><div ><i class="el-icon-chat-dot-round"></i></div>联系商家</div>
                    </div>
                </div>

            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <div>
                    <div class="grid-content bg-purple-dark">
                        <div>
                            {{branchname}}
                        </div>
                        <el-divider></el-divider>
                        <div style="margin-bottom: 10px">
                            <van-swipe-cell v-for="item in list">
                                <van-card
                                        :num="item.num"
                                        :price="item.goodsPrice"
                                        desc="描述信息"
                                        :title="item.goodsname"
                                        class="goods-card"
                                        :thumb="item.goodsUrl"
                                        style="background: #FFFFFF"
                                />
                                <template #right>
                                    <van-button square text="删除" type="danger" class="delete-button" />
                                </template>
                            </van-swipe-cell>
                        </div>
                        <van-divider />
                        <div style="float: right;width:100%">
                            <div style="float: right"  v-for="item in totallist">
                                合计: {{item.total}} 元
                            </div>
                        </div>

                        <div>
                            <div><span style="background: rgb(238 247 238)">推荐使用</span></div>
                            <el-row style="margin-left: 90px">
                                <el-col :span="11"><div class="grid-content bg-purple" style="text-align: center;padding-top: 15px;margin-right: 10px">联系商家</div></el-col>
                                <el-col :span="11"><div class="grid-content bg-purple" style="text-align: center;padding-top: 15px">致电商家</div></el-col>
                            </el-row>
                        </div>
                    </div>

                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark" >
                    <div>
                        <span>配送信息</span>
                    </div>
                    <el-divider></el-divider>
                    <div>
                        <div v-for="itt in totallist">
                            <div class="orderxx">
                                <div class="ordertitle">期望时间:</div>
                                <div class="ordervalue">立刻配送</div>
                            </div>
                            <div class="orderxx">
                                <div class="ordertitle">配送地址:</div>
                                <div class="ordervalue">{{itt.address}}</div>
                            </div>
                            <div class="orderxx">
                                <div class="ordertitle">配送服务:</div>
                                <div class="ordervalue">哪都通专送</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark" >
                    <div>
                        <span>订单信息</span>
                    </div>
                    <el-divider></el-divider>
                    <div v-for="ite in totallist">
                        <div class="block">
                            <div class="orderxx">
                                <div class="ordertitle">订单号码:</div>
                                <div class="ordervalue">{{ite.orderId}}</div>
                            </div>
                            <div class="orderxx">
                                <div class="ordertitle">下单时间:</div>
                                <div class="ordervalue">{{ite.placeTime}}</div>

                            </div>
                            <div class="orderxx">
                                <div class="ordertitle">支付方式:</div>
                                <div class="ordervalue">{{ite.paymodels}}</div>
                            </div>
                            <div class="orderxx">
                                <div class="ordertitle">餐具数量:</div>
                                <div class="ordervalue">1双</div>
                            </div>
                        </div>

                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark" style="text-align: center;background: #f2f2f2"><fon>到底了~</fon></div></el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "orderDetailed",
        data() {
            return {
                branchname:"",
                orderId:"",
                list:[],
                totallist:[],
                //用点击再来一单传给菜品页面
                branchid:""
            }
        },
        created() {
            var branchnam = sessionStorage.getItem("branchname");
            var orderI = sessionStorage.getItem("orderId");
            // this.branchname = this.$route.params.branchname;
            // this.orderId = this.$route.params.orderId;
            this.branchname = branchnam;
            this.orderId = orderI;
            console.log(this.branchname)
            console.log(this.orderId)
            this.initfindAllOrder();
        },
        methods:{
            initfindAllOrder(){
                this.$http.post("/order/order/findOrderByOrderId?orderid="+this.orderId).then(result => {
                    console.log(result)
                    this.list = result.data.data.list;
                    this.totallist = result.data.data.totallist
                    this.branchid=this.list[0].branchid
                    console.log(this.branchid)
                })
            },
            goMenuList(){
                sessionStorage.setItem("branchid",this.branchid);
                this.$router.push("/menuList")
            }
        },

    }
</script>

<style scoped>

    .ordertitle{
        float: left;
    }
    .ordervalue{
        float: right;
    }
    .orderxx{
        margin-bottom: 5px;
        display: block;
        height: 30px;
    }
    .orderfirst{
        display: inline-block;
        width: 100px;
        height: 30px;
    }
    .goods-card {
        margin: 0;
        /*background-color: @white;*/
    }

    .delete-button {
        height: 100%;
    }
    /*该报错不用管，不影响*/
    .el-row {
        margin-bottom: 10px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #ffffff;
    }
    .bg-purple {
        background: #ffffff;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

</style>